<template>
  <div class="home">
<!--    <mouse-move></mouse-move>-->
    <el-container style=" border: 0;height: 100vh">
      <el-aside
          width="200px"
          style="background-color: rgb(238, 241, 246);height: 100vh;padding: 0;border:0"
      >
        <el-menu
            style="height:100%;padding: 0;border:0;overflow-x: hidden;"
            background-color="#304156"
                 text-color="#ffffff"
            :default-openeds="['1', '3']"
        :router="true">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航</template>
            <el-menu-item index="/home/">用户管理</el-menu-item>
            <el-menu-item index="/home/article">文章管理</el-menu-item>
            <el-menu-item index="/home/category">分类管理</el-menu-item>
            <el-menu-item index="/home/role">角色管理</el-menu-item>
            <el-menu-item index="/home/menu">菜单管理</el-menu-item>

          </el-submenu>


        </el-menu>
      </el-aside>

      <el-container style="height: 100%">
        <el-header style="border-bottom: solid 1px;">
          <home-top/>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-header {

  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-menu-item {
  background-color: #1f2d3d;
}
</style>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import HomeTop from "@/views/home/HomeTop";
import UserList from "@/views/user/UserList";
import mouseMove from "@/components/mouseMove.vue";
export default {
  name: 'Home',
  components: {
    HelloWorld,
    HomeTop,
    UserList,
    mouseMove

  },

}
</script>
